<!--
 * @Author: MarsLay
 * @Date: 2021-12-27 10:54:10
 * @LastEditTime: 2024-02-04 15:45:56
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义头像组件，动态传值显示头像，可通过slot动态插入样式
 * @FilePath: components\avatar\avatar.vue
-->
<template>
  <uni-drawer ref="person" mode="right" :maskClick="true" :width="750">
    <l-page @back="back" canback callback :hasbtn="option.length > 0" title="添加成员">
      <view v-if="option.length > 0" class="handler">
        <view @click="selectedAll" class="selectAll">
          <checkbox :value="JSON.stringify(selectAll)" :checked="selectAll" />全选
        </view>
        <view @click="confirm" class="confirm">确定</view>
      </view>
      <block v-if="option.length > 0">
        <scroll-view :scroll-y="true" class="scroll">
          <checkbox-group v-if="multiple" @change="checkboxChange">
            <label v-for="(item, index) in option" :key="index">
              <view class="single-select">
                <checkbox :value="String(item[pKey])" :checked="item.checked" />
                <view class="single-inner">
                  <view class="username">{{ item.username }} {{ item.gender }} {{ item.age }} {{ item.moblie }}</view>
                </view>
              </view>
            </label>
          </checkbox-group>
          <radio-group v-else @change="radioChange">
            <label v-for="(item, index) in option" :key="index">
              <view class="single-select">
                <radio :value="String(item[pKey])" :checked="item.checked" />
                <view class="single-inner">
                  <view class="username">{{ item.username }} {{ item.gender }} {{ item.age }} {{ item.moblie }}</view>
                </view>
              </view>
            </label>
          </radio-group>
        </scroll-view>
      </block>
      <block v-else>
        <view class="noData-center">
          <image src="../../static/img/common/no-data.png"></image>
        </view>
      </block>
    </l-page>
  </uni-drawer>
</template>

<script>
export default {
  name: "popup-select",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    pKey: {
      type: String,
      default: '',
    },
    option: {
      type: Array,
      default: []
    },
    button: {
      type: Array,
      default: [{ title: '取消', bgcolor: '#E8FFEF', color: '#6ABE83', bdcolor: '#6ABE83', key: 'cancel' },
      { title: '确定', bgcolor: '#6ABE83', color: '#ffffff', key: 'confirm' }],
    }
  },
  data() {
    return {
      currentIdx: -1,
      selectAll: false
    };
  },
  computed: {},
  watch: {
    show(v) {
      v == true ? this.$refs.person.open() : this.$refs.person.close();
    }
  },
  onLoad(d) { },
  onShow() { },
  methods: {
    back() {
      this.$refs.person.close();
      this.$emit("update:show", false);
    },
    radioChange(e) {
      this.option.map((v) => {
        this.$set(v, "checked", e.detail.value == String(v[this.pKey]));
      });
    },
    checkboxChange(e) {
      this.option.map((v) => {
        this.$set(v, "checked", e.detail.value.includes(String(v[this.pKey])));
      });
      this.selectAll = this.option.every((v) => v.checked == true);
    },
    selectedAll() {
      this.selectAll = !this.selectAll;
      this.option.map(v => v.checked = this.selectAll);
    },
    confirm() {
      const selected = this.option.filter(v => v.checked == true);
      this.$refs.person.close();
      this.$emit("update:show", false);
      selected && this.$emit("confirm", { value: selected });
    }
  },
};
</script>
<style lang='less' scoped>
.scroll {
  padding: 20upx;
  height: 100%;
  box-sizing: border-box;
}

.scroll ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

/deep/ label {

  &:not(:last-child) {
    .single-select {
      margin-bottom: 20upx;
    }
  }

  .single-select {
    .flex(row, flex-start);
    padding: 0 20upx;
    height: 100upx;
    background-color: #ffffff;
    border-radius: 8upx;

    .single-inner {
      .flex(row, flex-start);
      padding-left: 10upx;
      width: calc(100% - 50upx);
      color: #333333;
      font-size: 28upx;
      line-height: 36upx;
    }
  }
}

.handler {
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20upx constant(safe-area-inset-bottom) 42upx !important;
  padding: 0 20upx env(safe-area-inset-bottom) 42upx !important;
  height: calc(constant(safe-area-inset-bottom) + 50px);
  height: calc(env(safe-area-inset-bottom) + 50px);
  .flex();
  background-color: #ffffff;
  box-shadow: 0px -2upx 0px 0px #F5F5F5;

  .selectAll {
    height: 36upx;
    font-size: 28upx;
    color: #333333;
    line-height: 36upx;
  }

  .confirm {
    .flex(row, center);
    width: 426upx;
    height: 80%;
    border-radius: 50upx;
    color: #ffffff;
    background: #6ABE83;
  }
}
</style>